<template>
  <div class="hlyyjczb">
    <div class="query">
      <div>
        <!-- <span>管理单位：</span> -->
        <!-- <el-cascader
          size="small"
          @change="org_change"
          :options="jigou_1"
          :props="{
            label: 'Name',
            value: 'Id',
            children: 'Children',
            checkStrictly: true,
          }"
          clearable
        ></el-cascader> -->
        <!-- <span style="display: inline-block; margin-left: 8px">责任医生：</span>
        <el-input
          size="small"
          v-model="query.doctorName"
          style="width: 200px"
        ></el-input> -->
        <span style="display: inline-block; margin-left: 8px">查询时间：</span>
        <el-date-picker
          v-model="query.time"
          size="small"
          @change="time_change"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button size="small" @click="get_list" style="margin-left: 10px"
          >查询</el-button
        >
        <el-button size="small">刷新</el-button>
      </div>
    </div>
    <div class="main">
      <el-row>
        <el-col :span="12">
          <el-table
            :data="tableData"
            v-loading="isLoading"
            border
            style="width: 100%"
            height="700"
            :header-cell-style="{
              color: '#000',
              backgroundColor: 'rgb(157,201,210)',
              fontFamily: 'FangSong',
            }"
          >
            <el-table-column align="center" label="科室"> </el-table-column>
            <el-table-column align="center" label="基本药物费用">
            </el-table-column>
            <el-table-column align="center" label="药品费用"> </el-table-column>
            <el-table-column align="center" label="基本药物占比">
            </el-table-column>
          </el-table>
          <div class="page">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.currentPage"
              :page-sizes="[15, 20, 50, 100]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
        </el-col>
        <el-col :span="12">
          <b>基本药物分析图</b>
          <qiun-vue-ucharts
            type="bar"
            :opts="opts"
            :chartData="chartData"
            style="height: 700px"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import qiunVueUcharts from "@qiun/vue-ucharts";
export default {
  components: {
    qiunVueUcharts,
  },
  data() {
    return {
      query: {
        orgId: 0,
        status: "0",
        signStatus: "-1",
        gender: "-1",
        ageType: "-1",
        bodyCheck: "-1",
        name: "",
        idCard: "",
      },
      page: {
        currentPage: 1,
        pageSize: 15,
        total: 1,
      },
      tableData: [],
      option_1: [],
      option_2: [],
      option_3: [],
      option: {},
      isLoading: false,
      jigou_1: [],
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['bar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 30, 0, 5],
        enableScroll: false,
        legend: {},
        xAxis: {
          boundaryGap: "justify",
          disableGrid: false,
          min: 0,
          axisLine: false,
          max: 70,
        },
        yAxis: {},
        extra: {
          bar: {
            type: "stack",
            width: 30,
            meterBorde: 1,
            meterFillColor: "#FFFFFF",
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            categoryGap: 2,
          },
        },
      },
    };
  },
  mounted() {
    // this.getJg();
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          categories: [
            "2018",
            "2019",
            "2020",
            "2021",
            "2022",
            "2023",
            "2023",
            "2023",
            "2023",
            "2023",
            "2023",
            "2023",
            "2023",
            "2023",
            "2023",
            "2023",
          ],
          series: [
            {
              name: "基本药物费用",
              data: [
                35, 36, 31, 33, 13, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34,
              ],
            },
          ],
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
    getJg() {
      this.$get(baseUrl.mbIp + "/api/NPatient/GetOrganTree").then((res) => {
        this.jigou_1 = res.Data;
      });
    },
    org_change(val) {
      this.query.orgId = val[val.length - 1];
    },
    get_list() {
      var data = {
        currentPage: this.page.currentPage,
        pageSize: this.page.pageSize,
        filter: this.query,
      };
      this.isLoading = true;
      this.$post(baseUrl.mbIp + "/api/Data/GetGluStandingBook", data)
        .then((res) => {
          this.isLoading = false;
          if (res.StatusCode != 200) {
            this.$notify.error({
              title: "错误",
              message: res.Errors,
            });
          }
          this.tableData = res.Data.PageList;
          this.page.total = res.Data.Total;
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    time_change() {
      this.query.startTime = this.query.time[0];
      this.query.endTime = this.query.time[1];
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.get_list();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.get_list();
    },
  },
};
</script>

<style scoped lang="scss">
.hlyyjczb {
  background-color: #fff;
  height: calc(100vh - 46px);
  padding: 15px;
  .main {
    margin-top: 10px;
  }

  .page {
    text-align: right;
    margin-top: 15px;
  }
}
</style>